<<<<<<< HEAD
<template>
    <div class="contaier">
        <van-nav-bar title="21天瘦腿计划" left-text="" @click-left="onClickLeft" left-arrow sticky>
            <template #right>
                <img src="../../assets/分享.png" alt="" style="width: 30px;height: 30px;">
            </template>
        </van-nav-bar>
        <div>
            <div class="cultiavtion">
                <div class="cult-img">
                    <img src="../../assets/img/养成8.png" alt="" />
                </div>
                <van-tabs v-model:active="active" class="act" sticky>
                    <van-tab title="介绍">
                        <div class="cult">
                            <div class="cult-box">
                                <div class="cult-left" style="margin-top: 10px;"> <span
                                        style="color: #39d167;margin-left: 10px;">•</span> 难度系数:
                                </div>
                                <div class="cult-right" style="margin-top: 10px;">
                                    &nbsp; &nbsp;<van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                        <van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                        <van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                        <van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left">
                                    <span style="color: #39d167;margin-left: 10px;">•</span> 适用人群:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 局部肥胖人群、久坐族
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left"> <span style="color: #39d167;margin-left: 10px;">•</span>
                                    预期效果:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 减重3-4斤
                                </div>
                            </div>
                            <div style="border-top: 1px solid #f4f4f4;margin-top: 10px;width: 90%;">
                                <div style="margin-top: 10px;">
                                    <p style="padding-right: 1px;">
                                        又白又细又直的大长腿都是别人家的腿有没有！
                                    </p>
                                    <p style="padding-right: 5px;font-size: 16px;margin-top: 5px">
                                       别人家的腿跟火腿肠一样, 自己的腿跟火腿一样,火急</p>
                                    <p style="margin-top: 5px">火燎啊有没有！</p>
                                    <p style="margin-top: 5px">我充分理解你的心情（其实并不理解,因为我根本没有</p>
                                    <p style="margin-top: 5px">胖过哈哈哈）,于是我从科学角度制定了一套运动瘦腿</p>
                                    <p style="margin-top: 5px">方案，来帮助你解决烦恼。</p>
                                    <p style="margin-top: 5px">首先我要说明不存在局部减脂,脂肪的消耗一定是全身</p>
                                    <p style="margin-top: 5px">的，要瘦就全身瘦,但是通过局部的锻炼可以增强腿部</p>
                                    <p style="margin-top: 5px">肌肉,在全身性减脂的同时可以让腿部看上去更紧致，</p>
                                    <p style="margin-top: 5px">线条更分明，同时可以改善基础代谢,让减肥不容易反</p>
                                    <p style="margin-top: 5px">弹。</p>
                                    <p style="margin-top: 5px">鉴于胖纸通常都没有很好的运动习惯,本计划会循序渐</p>
                                          <p style="margin-top: 5px">进地帮你培养运动习惯,梳理正确的减肥观念,最终实</p>
                                    <p style="margin-top: 5px">现瘦腿目标。</p>
                                    <p style="margin-top: 5px">特别提示：为了保证效果,请搭配【减肥饮食计划】来</p>
                                    <p style="margin-top: 5px">进行。</p>
                                </div>
                            </div>
                            <div class="center" style="position: relative;">
                                <h3 style="font-weight: 550;">分享评论</h3>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/blue.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">大然然</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-17 22:12</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <p style="padding-left: 67px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天瘦腿计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                      之前在反馈里面抱怨为啥没有瘦腿的，没想到这么快</p>
                                       <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                      就有了，做动作累的时候还可以看看小知识，坚持高</p>
                                       <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                      抬腿不能放弃，刚把得</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/shuang.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">大麦</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-13 9:34</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天瘦腿计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       瘦没瘦倒是不太明显看出来，不过腿部紧致了不少倒</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        是真的。。。还可以</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/poss.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">133****0073</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-11 12:20</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天瘦腿计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       在宿舍天天高抬腿把室友都吓到了。。。不过。。。</p>
                                       <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       她们也开始加入了，希望有效果</p>
                                </div>
                            </div>

                        </div>
                    </van-tab>
                    <van-tab title="目录">
                        <div class="day">
                            <div class="day1"><b>共21日</b></div>
                            <div class="day2">
                                <ul>
                                    <li>01日</li>
                                    <li class="hj" style="margin-left: -110px;">快速快步走3000步, 其实很容易</li>
                                </ul>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>02日</li>
                                        <li class="hj" style="margin-left: -135px;">第二天，连续快步走3000步</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -10PX;">

                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>03日</li>
                                        <li class="hj" style="margin-left: -120px;">第三天，快步走增加到5000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 0.5px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>04日</li>
                                        <li class="hj" style="margin-left: -105px;">第四天，继续连续快步走5000步</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>05日</li>
                                        <li class="hj" style="margin-left: -140px;">第五天新任务，慢跑10分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>

                                        <li>06日</li>
                                        <li class="hj" style="margin-left: -130px;">第六天，慢跑10分钟你别嫌长</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>07日</li>
                                        <li class="hj" style="margin-left: -130px;">第七天，最后一次10分钟慢跑</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>08日</li>
                                        <li class="hj" style="margin-left: -160px;">第八天，连续快跑6000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>09日</li>
                                        <li class="hj" style="margin-left: -115px;">第九天，6000步连续快步走起来</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>10日</li>
                                        <li class="hj" style="margin-left: -115px;">第十天，6000步就要连续快走！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>11日</li>
                                        <li class="hj" style="margin-left: -180px;">第十一天，慢跑15分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>12日</li>
                                        <li class="hj" style="margin-left: -154px;">第十二天，享受15分钟慢跑</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>13日</li>
                                        <li class="hj" style="margin-left: -140px;">第十三天，连续步慢跑15分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>14日</li>
                                        <li class="hj" style="margin-left: -140px;">键人脚勤，连续快步走7000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>15日</li>
                                        <li class="hj" style="margin-left: -75px;">第十五天，键人脚勤，7000步踩在脚下</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                      <div style="margin-top: 15px;">
                                    <ul>
                                        <li>16日</li>
                                        <li class="hj" style="margin-left: -140px;">第十六天，键人脚勤，7000步</li>
                                    </ul>
                                </div>  
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                      <div style="margin-top: 15px;">
                                    <ul>
                                        <li>17日</li>
                                        <li class="hj" style="margin-left: -190px;">第十七天，慢跑20分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                      <div style="margin-top: 15px;">
                                    <ul>
                                        <li>18日</li>
                                        <li class="hj" style="margin-left: -190px;">第十八天，慢跑20分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                      <div style="margin-top: 15px;">
                                    <ul>
                                        <li>19日</li>
                                        <li class="hj" style="margin-left: -190px;">第十九天，慢跑20分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                      <div style="margin-top: 15px;">
                                    <ul>
                                        <li>20日</li>
                                        <li class="hj" style="margin-left: -60px;">第二十天，键人脚勤，连续开步走8000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                      <div style="margin-top: 15px;">
                                    <ul>
                                        <li>21日</li>
                                        <li class="hj" style="margin-left: -80px;">第十五天，键人脚勤，7000步踩在脚下</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                            </div>
                        </div>
                    </van-tab>

                </van-tabs>
            </div>

        </div>
    </div>
    <div style="width: 95%;height: 100px;background-color: white;position: fixed;bottom: 0;left: 7px;">
        <button style="width: 98%;height: 50px;background-color:#39d167;margin-top: 42px;border: none;
        outline: none;color: white;position: absolute;left: 5px;border-bottom: 0px;">加入计划</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const active = ref(0);
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #000 !important
}

.cultiavtion {
    position: relative;
    width: 100%;
    height: 1200px;
    overflow: hidden;

    .cult-img {
        width: 100%;
        height: 150px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .cult {
        .cult-box {
            width: 120%;
            height: 42px;
        }

        .cult-left {
            float: left;
            height: 40px;
            text-align: center;
            padding-top: 10px;
        }

        .cult-right {
            float: left;
            height: 40px;
            width: 70%;
            text-align: left;
            padding-top: 10px;
        }
    }
}

[data-v-ca42e025] .van-icon {
    color: #ffa800 !important;
}

:deep(.van-tabs__line) {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    background: #39d167;
    border-radius: var(--van-tabs-bottom-bar-height);
}

.day {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 15px;

    .day1 {
        width: 100%;
        height: 30px;
        font-size: 19px;
        margin-left: 1px;
    }

    .day2 {
        width: 100%;
        height: 480px;
        margin-top: 15px;
        overflow-y: scroll;

        ul {
            height: 50px;
            display: flex;
            justify-items: center;

            li {
                color: #a7a7a7;
                margin-left: 1px;
            }

            .hj {
                margin-left: -150px;
            }
        }
    }
}

.center {
    h3 {
        margin-top: 60px;
        margin-left: 10px;
        margin-bottom: 25px;
    }

    .top {
        position: absolute;
        width: 100%;
        height: 50px;

        .top_item {
            // background-color: red;
            position: absolute;
            width: 100%;
            height: 50px;
        }

        // background-color: red;
    }

    .bottom {
        margin-top: 75px;
        width: 100%;
        height: 100px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom1 {
        margin-top: 40px;
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom2 {
        // margin-top: 75px;
        width: 100%;
        height: 120px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }
=======

<template>
  <div>
    <van-nav-bar
      title="21天瘦腰计划"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div class="waist">
      <div class="wai-img">
        <img src="../../assets/img/养成8.png" alt="" />
      </div>

      <van-tabs v-model:active="active">
        <van-tab title="介绍">
          <div class="wai">
            <div class="wai-box">
              <div class="wai-left"> • 难度系数:</div>
              <div class="wai-right">
                <van-icon name="star" />
                <van-icon name="star" />
                <van-icon name="star" />
              </div>
            </div>

            <div class="wai-box">
              <div class="wai-left"> • 适用人群:</div>
              <div class="wai-right">全身肥胖，高体脂人群</div>
            </div>

            <div class="wai-box">
              <div class="wai-left"> • 预期效果:</div>
              <div class="wai-right">减脂2-3斤</div>
            </div>

            <div class="wai-text">
              <div class="wai-text-title">
                嗨！腰婆（腩爷）们好！ 对，说的就是你， 常自黑“水桶腰 ”，也曾扬言变成“小腰精”的那个人，看着别人的小蛮腰，欲哭无泪，有么有？
              </div>
              <div class="wai-text-title">
                腰腹部是身体最容易囤积脂肪的部位之一，久坐不动、高油高糖的饮食以及缺乏锻炼，都会一个不小心就变苹果或梨形身材。
              </div>
              <div class="wai-text-title">
                如果你已经下定决心要减肥，那么来挑战一下这套高强度的有氧+无氧瘦腰计划吧，今天开始每天30分钟，挑战两组动作外加GET一条减肥小知识，来吧，为了小蛮腰，对自己狠一点！
              </div>
               <div class="wai-text-title">
                首先我要说明不存在局部减脂，脂肪的消耗一定是全身的，要瘦就全身瘦，但是通过局部的锻炼可以增强腿部肌肉，在全身性减脂的同时可以让腿部看上去更紧致，线条更分明，同时可以改善基础代谢，让减肥不容易反弹。
              </div>
              <div class="text-te"></div>
              <div class="wai-text-title">
                特别提示：为了避免事倍功半，本计划建议搭配【减肥饮食计划】进行。
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="目标">内容 2</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { ref } from 'vue'

const active = ref(0)

const onClickLeft = () => history.back()
</script>




<style lang="scss" scoped>
.weight {
  width: 100%;
  height: 100%;
  // background-color: yellow;
  .wai-img {
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .wai{
    .wai-box {
      width: 100%;
      height: 50px;
    }

    .wai-left {
      float: left;
      height: 40px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;
    }
    .wai-right {
      float: left;
      height: 40px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: 10px;
    }

    .wai-text {
      width: 100%;
      padding: 10px;
      // line-height: 30px;
      // background-color: pink;
      color: #666;

      .wai-text-title {
        line-height: 30px;
      }
      .text-te {
        color: red;
        font-weight: bold;
      }
    }
  }
>>>>>>> refs/remotes/origin/master
}
</style>